<!-- 产奶记录-编辑 -->
<template>
    <el-drawer
        :model-value="isShowEdit"
        size="800"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <template #header>
            <strong style="font-weight: bold; color: #000;">编辑</strong>
        </template>
        <template #default>
            <el-form ref="formRef" :model="form" label-width="auto" style="max-width: 800px">
                <el-form-item label="牛号" prop="cowId">
                    <el-select clearable filterable v-model="form.cowId">
                        <el-option v-for="item in allComNameList" :label="`${item.code}-${item.breed}`" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="泌乳批次" prop="lactationBatch">
                    <el-input v-model="form.lactationBatch" />
                </el-form-item>
                <el-form-item label="日产奶量/公斤" prop="totalMilk">
                    <el-input v-model="form.totalMilk" disabled />
                </el-form-item>
                <el-form-item label="早/公斤" prop="morningMilk">
                    <el-input v-model="form.morningMilk" type="number" />
                </el-form-item>
                <el-form-item label="中/公斤" prop="noonMilk">
                    <el-input v-model="form.noonMilk" type="number" />
                </el-form-item>
                <el-form-item label="晚/公斤" prop="eveningMilk">
                    <el-input v-model="form.eveningMilk" type="number" />
                </el-form-item>
                <el-form-item label="缩宫素注射量-早/IU" prop="morningOxytocin">
                    <el-input v-model="form.morningOxytocin" />
                </el-form-item>
                <el-form-item label="缩宫素注射量-中/IU" prop="noonOxytocin">
                    <el-input v-model="form.noonOxytocin" />
                </el-form-item>
                <el-form-item label="缩宫素注射量-晚/IU" prop="eveningOxytocin">
                    <el-input v-model="form.eveningOxytocin" />
                </el-form-item>
                <el-form-item label="记录日期" prop="recordDate">
                    <el-date-picker
                        style="width: 100%;"
                        v-model="form.recordDate"
                        type="date"
                        placeholder="请选择日期"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item label="记录备注" prop="remarks">
                    <el-input v-model="form.remarks" />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelHandler">取消</el-button>
                <el-button type="primary" @click="confirmHandler">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, reactive, watch, onUpdated, onMounted } from 'vue'
import { reqGetCowMilkInfo, reqGetCowMilkUpdate } from '@/api/daily'
import { reqGetComNameList } from '@/api/company'
import { ElMessage } from 'element-plus'

// 表单收集
let form = reactive({
    cowId: '', // 牛号
    lactationBatch: '', // 泌乳批次
    totalMilk: '', // 日产奶/公斤 (早中晚总和)
    morningMilk: '', // 早/公斤
    noonMilk: '', // 中/公斤
    eveningMilk: '', // 晚/公斤
    morningOxytocin: '', // 缩宫素-早
    noonOxytocin: '', // 缩宫素-中
    eveningOxytocin: '', // 缩宫素-晚
    createUserId: '', // 记录人uid
    recordDate: '', // 记录日期
    remarks	: '', // 记录备注
})

// 监听早
watch(() => form.morningMilk, (newVal, oldVal) => { 
    // let zonghe = parseFloat(newVal) + parseFloat(form.noonMilk) + parseFloat(form.eveningMilk)
    // form.totalMilk = zonghe.toFixed(2)
    let zonghe = Number(newVal) + Number(form.noonMilk) + Number(form.eveningMilk)
    form.totalMilk = zonghe.toFixed(2)
})
// 监听中
watch(() => form.noonMilk, (newVal, oldVal) => { 
    // let zonghe = parseFloat(form.morningMilk) + parseFloat(newVal) + parseFloat(form.eveningMilk)
    // form.totalMilk = zonghe.toFixed(2)
    let zonghe = Number(form.morningMilk) + Number(newVal) + Number(form.eveningMilk)
    form.totalMilk = zonghe.toFixed(2)
})
// 监听晚
watch(() => form.eveningMilk, (newVal, oldVal) => { 
    // let zonghe = parseFloat(form.morningMilk) + parseFloat(form.noonMilk) + parseFloat(newVal)
    // form.totalMilk = zonghe.toFixed(2)
    let zonghe = Number(form.morningMilk) + Number(form.noonMilk) + Number(newVal)
    form.totalMilk = zonghe.toFixed(2)
})

// 接收父组件传递过来的值
let props = defineProps(['isShowEdit', 'id'])

// 自定义事件，子传父
let $emit = defineEmits(['closeEditDrawer'])

// 获取牛号下拉列表
let allComNameList = ref([])
const getComNameList = async () => {
    let res = await reqGetComNameList()
    allComNameList.value = res.data
}

// 根据主键获取 信息
const getCowMilkInfo = async () => {
    let res = await reqGetCowMilkInfo({ id: props.id })
    Object.assign(form, res.data)
    console.log('根据主键获取---信息', form)
}

// 取消按钮
const cancelHandler = () => {
    $emit('closeEditDrawer', false)
    // 清空表单
    formRef.value.resetFields()
}

// 保存按钮
const formRef = ref()
const confirmHandler = async () => {
    let res = await reqGetCowMilkUpdate(form)
    console.log('编辑保存', res)
    if(res.status == 200){
        ElMessage({
            type: 'success',
            message: '编辑成功'
        })
        $emit('closeEditDrawer', false)
        formRef.value.resetFields() // 清空表单
    }else{
        ElMessage({
            type: 'warning',
            message: res.msg
        })
    }
}

// 组件挂载
onMounted(() => {
    getComNameList()
})

// 组件更新
onUpdated(() => {
    getCowMilkInfo()
})
</script>